<template>
	<view class="pageview flex flex-direction" :style="skin">
		<zx-nav title="我的订单" bg="#fff"></zx-nav>
		<loading :isShow="isFullLoading" size="lg"></loading>
		<block v-if="!isFullLoading">
			<view class="order-header u-flex align-center justify-between">
				<view class="flex-sub">订单：{{ orderInfo.order_no || '' }}</view>
				<tui-countdown :time="time" color="#969696" colonColor="#969696" bcolor="transparent" bgcolor="transparent" v-if="orderInfo.status === 1"></tui-countdown>
				<view class="u-primary ml20">{{ orderInfo.status_ }}</view>
			</view>
			<view class="main flex-sub orderinfo">
				<view class="card addr-card flex justify-between align-center">
					<image class="icon" :src="`${assetsPath}/addr.png`" mode="widthFix"></image>
					<view class="flex-sub">
						<view>
							<view class="flex align-center">
								<text class="name">{{ orderInfo.contact_name }}</text>
								<text class="phone ml10">{{ orderInfo.contact_phone }}</text>
							</view>
							<view class="address">{{ orderInfo.address }}</view>
						</view>
					</view>
				</view>
				<view class="card mt20">
					<div class="shop-item" v-for="(shop, idx) in orderInfo.goods_data" :key="idx">
						<div class="shop-item-hd flex align-center" @tap="navTo(`/pages/shop/shop?id=${shop.sid}`)">
							<image class="shopicon" src="/static/shopicon.png" mode="widthFix"></image>
							<text>{{ shop.supplier_name }}</text>
							<image class="right" src="/static/right.png" mode="widthFix"></image>
						</div>
						<div class="goodsinfo" @tap="navTo(`/pages/goodsdetails/goodsdetails?id=${item.pid}`)" v-for="(item, index) in shop.data" :key="index">
							<view class="u-flex align-center">
								<div class="imgbox"><image :src="item.img_url[0] + '?imageView2/0/w/180'" mode="widthFix"></image></div>
								<div class="flex-sub u-flex u-flex-column">
									<div class="u-flex u-row-between">
										<div class="name">{{ item.name }}</div>
										<div class="price">
											<text class="unit">￥</text>
											{{ item.price }}
										</div>
									</div>
									<div class="tag flex justify-between">
										<view>
											<text>{{ item.product_dengji_ }}</text>
											<text class="ml20">{{ item.product_guige_ }}</text>
										</view>
										<text class="num">×{{ item.qty }}扎</text>
									</div>
								</div>
							</view>
							<!-- <view class="u-flex align-center justify-end">
								<view class="btn" @click="orderAftersale(item)" v-if="orderInfo.status == 10 && item.aftersale == 0 && isOverTime > 0 && orderInfo.hb_status == 5">
									去售后
								</view>
								<view class="btn ml20" v-if="item.evaluate == 0 && orderInfo.status == 10 && orderInfo.hb_status == 10" @click="orderEvaluate(item)">
									{{ item.evaluate == 0 ? '去评价' : '已评价' }}
								</view>
							</view> -->
							<view class="u-flex align-center justify-end">
								<view class="btn" v-if="orderInfo.status == 5" @click.stop="orderAftersale(item)">
									{{ item.aftersale == 0 ? '申请售后' : item.aftersale == 1 ? '售后中' : '完成售后' }}
								</view>
								<view class="btn" v-if="item.evaluate == 0 && item.status == 22" @click.stop="orderEvaluate(item)">去评价</view>
							</view>
						</div>
					</div>
				</view>
				<view class="card bg-white mt20">
					<view class="group-row flex align-center">
						<view class="title" style="width: 6em">客户订单备注</view>
						<view class="flex-sub info" v-if="orderInfo.remark1">{{ orderInfo.remark1 }}</view>
					</view>
				</view>
				<view class="card bg-white mt20" v-if="orderInfo.hj_num">
					<view class="group-row flex align-center">
						<view class="title" style="width: 6em">货位号</view>
						<view class="flex-sub info t-grey">
							<text class="text-primary u-m-r-10">{{ orderInfo.hj_num }}</text>
							#{{ orderInfo.order_count }}-{{ orderInfo.order_number }}
						</view>
					</view>
				</view>
				<view>
					<view class="flex align-center" v-if="orderInfo.hj_num">
						<span>货位号：</span>
						<div class="text-red">{{ orderInfo.hj_num || '' }}</div>
					</view>
				</view>
				<view class="card bg-white mt20 comment" v-if="orderInfo.express_num">
					<view class="group-row u-flex align-center">
						<span>发货物流：</span>
						<div class="text-red">{{ orderInfo.express_name || '' }}</div>
					</view>
					<view class="group-row u-flex align-center">
						<span>物流单号：</span>
						<div class="flex-sub">{{ orderInfo.express_num || '' }}</div>
						<div>
							<span @tap="orderShowLog" class="btn btn-primary">查看物流</span>
							<span class="btn ml24" @tap="copyOrder(orderInfo.express_num)">复制</span>
						</div>
					</view>
					<view class="group-row u-flex align-center">
						<span>实际包装费用：</span>
						<div>{{ orderInfo.sj_pack_amount || '' }}</div>
					</view>

					<view class="group-row u-flex align-center">
						<span>实际运输费用：</span>
						<div>{{ orderInfo.sj_transport_amount || '' }}</div>
					</view>
					<view class="group-row u-flex">
						<span>费用结算：</span>
						<div class="flex-sub text-gray">多余的包装费和运费会原路返回至您的支付账户，少的差价平台客服会联系您进行补差</div>
					</view>
					<view class="group-row u-flex" v-if="orderInfo.remark">
						<span>平台留言：</span>
						<view class="flex-sub comment-info">{{ orderInfo.remark || '' }}</view>
					</view>
				</view>
				<view class="card bg-white mt20">
					<view class="group-row flex align-center justify-between">
						<view class="title">配送方式</view>
						<view class="picker">
							<text>{{ orderInfo.transport_name }}</text>
							<!-- <text class="cuIcon-right"></text> -->
						</view>
					</view>
				</view>

				<view class="card bg-white mt20">
					<view class="group-row flex align-center justify-between">
						<view class="title">花款小计</view>
						<text class="text-gray">￥{{ orderInfo.goods_amount }}</text>
					</view>
					<view class="group-row">
						<view class="flex align-center justify-between">
							<view class="title" style="width: 20em">运输费</view>
							<text class="text-gray">￥{{ orderInfo.transport_amount }}</text>
						</view>
					</view>
					<view class="group-row">
						<view class="flex align-center justify-between">
							<view class="title">包装费</view>
							<text class="text-gray">￥{{ orderInfo.pack_amount }}</text>
						</view>
						<!-- <view class="tag">不满10公斤收取8元包装费，满10公斤免费</view> -->
					</view>
					<view class="group-row" v-if="orderInfo.baowen_amount > 0">
						<view class="flex align-center justify-between">
							<view class="title">保温费</view>
							<text class="u-primary">￥{{ orderInfo.baowen_amount || 0 }}</text>
						</view>
						<view class="tag">花花北上需御寒保暖</view>
					</view>
					<view class="group-row" v-if="false">
						<view class="flex align-center justify-between">
							<view class="title" style="width: 20em">
								运输费
								<text class="text-red margin-left-sm">估重：{{ orderInfo.goods_weight }}kg</text>
							</view>
							<text class="text-gray">￥{{ orderInfo.transport_amount }}</text>
						</view>
						<view class="tag">运输费为预收，发完货多退少补</view>
					</view>
					<!-- <view class="group-row ">
						<view class="flex align-center justify-between">
							<view class="title">服务费</view>
							<text class="text-gray">￥{{ orderInfo.fw_amount }}</text>
						</view>
						<view class="tag">平台佣金抽成，不同会员等级佣金不同</view>
					</view> -->
					<view class="group-row">
						<view class="flex align-center justify-between">
							<view class="title">优惠券减免</view>
							<text class="u-primary">-￥{{ orderInfo.coupon_amount }}</text>
						</view>
						<view class="tag">金额</view>
					</view>
					<view class="group-row">
						<view class="flex align-center justify-between">
							<view class="title">订单总额</view>
							<text class="u-primary">￥{{ orderInfo.order_amount }}</text>
						</view>
					</view>
					<view class="group-row">
						<view class="flex align-center justify-between">
							<view class="title">支付金额</view>
							<text class="u-primary">￥{{ orderInfo.need_amount }}</text>
						</view>
					</view>
				</view>
				<view class="card bg-white mt20">
					<view class="group-row">
						<view class="flex align-center justify-between">
							<view class="title">下单时间</view>
							<text class="text-gray" v-if="orderInfo.created_at">{{ orderInfo.created_at }}</text>
						</view>
					</view>
					<view class="group-row">
						<view class="flex align-center justify-between">
							<view class="title">订单编号</view>
							<view class="text-gray" style="white-space: nowrap">
								<text>{{ orderInfo.order_no }}</text>
								<text class="u-primary u-m-l-10" @click="copyOrder(orderInfo.order_no)">复制</text>
							</view>
						</view>
					</view>
					<view class="group-row flex align-center justify-between" v-if="orderInfo.status != 1 && orderInfo.status != 2">
						<view class="title">支付方式</view>
						<view class="picker">
							<text>{{ orderInfo.trade_type }}</text>
						</view>
					</view>
				</view>
				<myassistant></myassistant>
			</view>
		</block>
	</view>
</template>

<script>
import myassistant from '@/components/myassistant';
import tuiCountdown from '@/components/countdown/countdown';
import loading from '@/components/loading';
export default {
	components: {
		myassistant,
		tuiCountdown,
		loading
	},
	data() {
		return {
			payway: 0,
			status: 4,
			orderInfo: {}, //订单信息
			goodsList: [],
			id: '',
			isShow: false,
			isFullLoading: true
		};
	},
	onShow() {},
	onLoad(options) {
		this.id = options.id;
		this.orderShow();
	},

	computed: {
		time() {
			if (this.orderInfo && this.orderInfo.created_at) {
				var date2 = new Date(); //结束时间
				var date3 = date2.getTime() - new Date(this.orderInfo.created_at.replace(/-/g, '/')).getTime(); //时间差的毫秒数
				return 30 * 60 - date3 / 1000;
			}
			return 0;
		},
		isOverTime() {
			if (this.orderInfo && this.orderInfo.confirm_at) {
				var date2 = new Date(); //结束时间
				var date3 = date2.getTime() - new Date(this.orderInfo.confirm_at.replace(/-/g, '/')).getTime(); //时间差的毫秒数
				console.log('date2.getTime()', date2.getTime(), new Date(this.orderInfo.confirm_at.replace(/-/g, '/')).getTime());
				return 24 * 60 * 60 - date3 / 1000;
			}
			return 0;
		}
	},
	methods: {
		//查看订单
		orderShow() {
			let $me = this;
			$me.$postAction($me.$api.orderShow + this.id)
				.then(da => {
					if (da.code == 0) {
						this.goodsList = [];
						this.orderInfo = da.data;
						for (var key in da.data.goods_data) {
							this.goodsList.push(da.data.goods_data[key]);
						}
					}
				})
				.finally(() => {
					this.isFullLoading = false;
				});
		},
		getReason: function (status) {
			//status 1待付款 2已过期 3待发货4备货中5待收货 10待评价
			switch (status) {
				case 3:
					return '等待卖家发货';
					break;
				case 5:
					return '卖家已发货';
					break;
				case 10:
					return '等待买家评价';
					break;
			}
			//return ["剩余时间", "等待卖家发货", "", "等待买家评价", ""][status - 1]
		},
		//复制单号
		copyOrder(value) {
			uni.setClipboardData({
				data: value,
				success: function () {
					console.log('success');
				}
			});
		},
		//申请售后
		orderAftersale(goods) {
			if (goods.aftersale == 0) {
				uni.setStorage({
					key: 'orderInfo',
					data: JSON.stringify(Object.assign({}, goods)),
					success: function (res) {
						uni.navigateTo({
							url: '/pages/order/afterSales/apply'
						});
					}
				});
			} else {
				uni.navigateTo({
					url: '/pages/order/afterSales/details?order_product_id=' + goods.order_product_id
				});
			}
		},
		//订单评价
		orderEvaluate(goods) {
			uni.navigateTo({
				url: '/pages/order/evaluate/send?id=' + goods.pid + '&order_product_id=' + goods.order_product_id
			});
		},
		//查看物流
		orderShowLog() {
			uni.navigateTo({
				url: '/pages/logistics/logistics?order_no=' + this.orderInfo.order_no
			});
		},
		navTo(path) {
			this.$Router.push({
				path
			});
		}
	}
};
</script>
<style lang="scss">
.order-header {
	padding: 32upx 28upx;
	font-size: 32upx;
	font-weight: 500;
}
.main {
	overflow: auto;
	padding-bottom: calc(20upx + env(safe-area-inset-bottom) / 2);
}
.card {
	border-radius: 12upx;
	background: #fff;
	padding: 35upx 32upx;
}
.addr-card {
	padding: 36upx 32upx;
	min-height: 150upx;
	color: #000;
	font-weight: 500;
	background: #fff;
	background-size: 100% auto;
	.icon {
		display: block;
		width: 54upx;
		height: 54upx;
		margin-right: 24upx;
	}
	.name {
		color: #000;
	}
	.phone {
		color: #636366;
		font-size: 24upx;
	}
	.address {
		color: #636366;
		font-size: 24upx;
		margin-top: 8upx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
}
.shop-item {
	& + .shop-item {
		margin-top: 16upx;
	}
}
.shop-item-hd {
	font-size: 28upx;
	line-height: 40upx;
	color: $u-main-color;
	.shopicon {
		width: 31upx;
		height: 28upx;
		margin-right: 16upx;
	}
	.right {
		width: 28upx;
		height: 28upx;
		margin-left: 8upx;
	}
}
.goodsinfo {
	padding: 10upx 0;
	.imgbox {
		width: 130upx;
		height: 130upx;
		margin-right: 16upx;
		border-radius: 8upx;
		overflow: hidden;
		image {
			display: block;
			width: 100%;
			height: 100%;
		}
	}

	.name {
		color: $u-main-color;
		font-size: 32upx;
		font-weight: 500;
		line-height: 45upx;
	}

	.tag {
		color: $u-content-color;
		font-size: 24upx;
		margin-top: 8upx;
	}

	.price {
		.unit {
			font-size: 24upx;
		}
		color: $u-main-color;
		font-size: 36upx;
	}
	.btn {
		height: 48upx;
		line-height: 44upx;
		background: #ffffff;
		border-radius: 24upx;
		border: 1px solid #787878;
		color: #787878;
		font-size: 24upx;
		display: inline-block;
		padding: 0 20upx;
	}
}
.group-row {
	font-size: 28upx;
	& + .group-row {
		margin-top: 28upx;
	}
	.title {
		width: 5em;
		margin-right: 40upx;
		color: #1c1c1e;

		font-weight: 500;
	}

	.text-gray {
		color: #a4a4a4;
	}
	.tag {
		padding-top: 8upx;
		color: #636366;
		font-size: 24upx;
	}
	.btn {
		height: 48upx;
		background: #ffffff;
		border-radius: 24upx;
		border: 1px solid #aeaeb2;
		padding: 0 25upx;
		line-height: 44upx;
		font-size: 24upx;
		color: #aeaeb2;
	}
	.btn-primary {
		border: 1px solid var(--nav-bg);
		color: var(--nav-bg);
	}
}
</style>
